<template>
  <div class="tw-main">
    <div class="screen" >
      <el-row class="tw-grid">
        <el-col :lg="12" :md="24" class="tw-grid__left">
          <tw-card
            :label="$t('m.productMap')"
          >
            <iframe src="http://218.77.50.45:8222/showroom/front/first/map_pass" style="width:100%; height:45vh; border:none;"></iframe>
            <!--<tw-echarts
              id="echarts_productionMap"
              ref="echarts_productionMap"
              :additionalOptions="additionalOptions['echarts_productionMap']"
              height="45vh"
              @finishCharts="handleProductionMap"
            ></tw-echarts>-->
          </tw-card>
        </el-col>
        <el-col :lg="12" :md="24" class="tw-grid__right">

          <!--20180723-->
          <tw-card
            :label="$t('m.registerUserCount')"
            :rightLabel="$t('m.registerUserCount') + '：' + userTotalCount">
            <ul class="tw-user-info-list">
              <li class="tw-user-info-list__item teacher" @click="handleJumperClick">
                <div class="tw-user-info-list__item__left">
                  <img src="/static/weishidataview/images/teacher-header.png" alt="img">
                </div>
                <div class="tw-user-info-list__item__right">
                  <p class="name">{{$t('m.teacher')}}</p>
                  <p class="digi">{{userHeaders[0].value}}</p>
                </div>
              </li>
              <li class="tw-user-info-list__item student" @click="handleJumperClick">
                <div class="tw-user-info-list__item__left">
                  <img src="/static/weishidataview/images/student-header.png" alt="img">
                </div>
                <div class="tw-user-info-list__item__right">
                  <p class="name">{{$t('m.student')}}</p>
                  <p class="digi">{{userHeaders[1].value}}</p>
                </div>
              </li>
              <li class="tw-user-info-list__item parents" @click="handleJumperClick">
                <div class="tw-user-info-list__item__left">
                  <img src="/static/weishidataview/images/parent-header.png" alt="img">
                </div>
                <div class="tw-user-info-list__item__right">
                  <p class="name">{{$t('m.parent')}}</p>
                  <p class="digi">{{userHeaders[2].value}}</p>
                </div>
              </li>
              <li class="tw-user-info-list__item others"  @click="handleJumperClick">
                <div class="tw-user-info-list__item__left">
                  <img src="/static/weishidataview/images/other-header.png" alt="img">
                </div>
                <div class="tw-user-info-list__item__right">
                  <p class="name">{{$t('m.other')}}</p>
                  <p class="digi">{{userHeaders[3].value}}</p>
                </div>
              </li>
            </ul>
            <tw-echarts
              id="echarts_newRegisterUsers"
              ref="echarts_newRegisterUsers"
              :additionalOptions="additionalOptions['echarts_newRegisterUsers']"
              height="33vh">
            </tw-echarts>
          </tw-card>
        </el-col>
      </el-row>
      <el-row class="tw-grid">
        <el-col :lg="24" :md="24" class="tw-grid__single">
          <tw-card
            :label="$t('m.userStatisticsTitle')"
            :tabRight="true"
            :tabs="userTab"
            :activeTab="userTabActive"
            @changeTab="handleChangeCardTab"
          >
            <div class="tw-tab-panes">
              <div class="tw-tab-pane" name="tab-second" v-show="userTabActive === 'tab-second'" style="height: 29vh">
                <el-row>
                  <el-col :span="4">
                    <tw-item-info
                      type="activity"
                      :label="$t('m.activeUser')"
                      :number="activeUserTotal"
                    ></tw-item-info>
                  </el-col>
                  <el-col :span="20">
                    <tw-echarts
                      id="echarts_monthUserActivity"
                      ref="echarts_monthUserActivity"
                      :additionalOptions="additionalOptions['echarts_monthUserActivity']"
                      @finishCharts="simulationTime"
                      height="29vh"
                    ></tw-echarts>
                  </el-col>
                </el-row>
              </div>
              <div class="tw-tab-pane" name="tab-third" v-show="userTabActive === 'tab-third'" style="height: 29vh">
                <el-row>
                  <el-col :span="4">
                    <tw-item-info
                      type="school"
                      :label="$t('m.schoolNum')"
                      :number="totalSchool"
                      url="schoolNumber"></tw-item-info>
                  </el-col>
                  <el-col :span="20">
                    <tw-echarts
                      id="echarts_schoolNumber"
                      ref="echarts_schoolNumber"
                      :additionalOptions="additionalOptions['echarts_schoolNumber']"
                      height="29vh"></tw-echarts>
                  </el-col>
                </el-row>
              </div>
              <div class="tw-tab-pane" name="tab-fourth" v-show="userTabActive === 'tab-fourth'" style="height: 29vh">
                <el-row>
                  <el-col :span="4">
                    <tw-item-info
                      type="visit"
                      :label="$t('m.visitNum')"
                      :number="totalVisitPVCount"
                    ></tw-item-info>
                  </el-col>
                  <el-col :span="20">
                    <tw-echarts
                      id="echarts_visitsNumber"
                      ref="echarts_visitsNumber"
                      :additionalOptions="additionalOptions['echarts_visitsNumber']"
                      @finishCharts="simulationVisit"
                      height="29vh"
                    ></tw-echarts>
                  </el-col>
                </el-row>
              </div>
            </div>
          </tw-card>
        </el-col>
      </el-row>
    </div>
    <div class="screen" style="min-height: 89vh">
      <el-row class="tw-grid">
        <el-col :lg="12" :md="24" class="tw-grid__left">
          <tw-card
            :label="$t('m.hotAppCover')"
          >
            <tw-bubble></tw-bubble>
          </tw-card>
        </el-col>
        <el-col :lg="12" :md="24" class="tw-grid__right">
          <tw-card
            :label="$t('m.appStatistics')"
          >
            <tw-echarts
              id="echarts_appAccessStatic"
              ref="echarts_appAccessStatic"
              :additionalOptions="additionalOptions['echarts_appAccessStatic']"
              height="37vh"
              @finishCharts="simulation"
            ></tw-echarts>
          </tw-card>
        </el-col>
      </el-row>
      <el-row class="tw-grid">
        <el-col :lg="12" :md="24" class="tw-grid__left">
          <tw-card
            :label="$t('m.userTrends')"
          >
            <tw-table
              :tableData="tableData"></tw-table>
          </tw-card>
        </el-col>
        <el-col :lg="12" :md="24" class="tw-grid__right">
          <tw-card
            :tabs="teacherTab"
            :activeTab="teacherTabActive"
            @changeTab="handleChangeCardTab"
          >
            <div class="tw-tab-panes">
              <div class="tw-tab-pane" name="tab-first" v-show="teacherTabActive === 'tab-first'">
                <tw-echarts
                  id="echarts_teacherBehaviorAnalysis"
                  ref="echarts_teacherBehaviorAnalysis"
                  :additionalOptions="additionalOptions['echarts_teacherBehaviorAnalysis']"
                  @finishCharts="handleFinishCharts"
                  height="37vh"
                ></tw-echarts>
              </div>
              <div class="tw-tab-pane" name="tab-second" v-show="teacherTabActive === 'tab-second'">
                <tw-echarts
                  id="echarts_studentBehaviorAnalysis"
                  ref="echarts_studentBehaviorAnalysis"
                  :additionalOptions="additionalOptions['echarts_studentBehaviorAnalysis']"
                  @finishCharts="handleFinishCharts"
                  height="37vh"
                ></tw-echarts>
              </div>
            </div>
          </tw-card>
        </el-col>
      </el-row>
    </div>
    <div class="screen" style="min-height: 89vh">
      <el-row class="tw-grid">
        <el-col :span="24" class="tw-grid__single">
          <tw-card
            :label="$t('m.logControl')">
            <tw-table
              class="full-height"
              :maxItem="15"
              :tableData="tableData1"></tw-table>
          </tw-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script scoped>
import echarts from 'echarts'
import TwCard from '@/components/TwCard.vue'
import TwEcharts from '@/components/TwEcharts.vue'
import TwBubble from '@/components/TwBubble.vue'
import TwTable from '@/components/TwTable.vue'
import TwItemInfo from '@/components/TwItemInfo.vue'
import configUtil from '@/config/config'

export default{
  props: [],
  created () {
    let vm = this

    vm.getOrgAreaRequest()

    // echarts_productionMap 产品覆盖地图
    // this.$axios.get('/static/weishidataview/jsondata/echarts_productionMap.json').then(response => {
    //   this.additionalOptions.echarts_productionMap = response.data
    // }, response => {
    //   console.log('error')
    // })
    // 用户角色数量统计
    let chartData0 = {
      'xAxisData': [],
      'seriesName': [this.$i18n.messages[this.$i18n.locale].m.teacher, this.$i18n.messages[this.$i18n.locale].m.student, this.$i18n.messages[this.$i18n.locale].m.parent, this.$i18n.messages[this.$i18n.locale].m.other],
      'seriesData': []
    }
    vm.additionalOptions.echarts_newRegisterUsers = chartData0
    let userRegisterReq = {'type': '1'}
    this.$axios.post(configUtil.getApiPath() + 'user/getUserRegisterThrend', userRegisterReq).then(response => {
      if (response && response.data.pageInfo.list && response.data.pageInfo.list.length > 0) {
        let seriesNameArray = [this.$i18n.messages[this.$i18n.locale].m.teacher, this.$i18n.messages[this.$i18n.locale].m.student, this.$i18n.messages[this.$i18n.locale].m.parent, this.$i18n.messages[this.$i18n.locale].m.other]
        let xAxisArray = []
        let teacherCountArray = []
        let studentCountArray = []
        let parentCountArray = []
        let otherCountArray = []

        for (let i = 0; i < response.data.pageInfo.list.length; i++) {
          xAxisArray.push(response.data.pageInfo.list[i].staname)
          teacherCountArray.push(response.data.pageInfo.list[i].teacherCount)
          studentCountArray.push(response.data.pageInfo.list[i].studentCount)
          parentCountArray.push(response.data.pageInfo.list[i].parentCount)
          otherCountArray.push(response.data.pageInfo.list[i].otherCount)

          if (i === response.data.pageInfo.list.length - 1) {
            vm.userHeaders[0].value = response.data.pageInfo.list[i].teacherCount
            vm.userHeaders[1].value = response.data.pageInfo.list[i].studentCount
            vm.userHeaders[2].value = response.data.pageInfo.list[i].parentCount
            vm.userHeaders[3].value = response.data.pageInfo.list[i].otherCount
            vm.userTotalCount = response.data.pageInfo.list[i].teacherCount + response.data.pageInfo.list[i].studentCount + response.data.pageInfo.list[i].parentCount + response.data.pageInfo.list[i].otherCount
          }
        }
        let chartData = {
          'xAxisData': xAxisArray,
          'seriesName': seriesNameArray,
          'seriesData': [teacherCountArray, studentCountArray, parentCountArray, otherCountArray]
        }
        vm.additionalOptions.echarts_newRegisterUsers = chartData
      } else {
        vm.additionalOptions.echarts_newRegisterUsers = {}
      }
    }, response => {
      vm.additionalOptions.echarts_newRegisterUsers = {}
      console.log('getUserRegisterThrend error')
    })

    // echarts_appAccessStatic 应用接入统计
    this.$axios.post(configUtil.getApiPath() + 'app/queryAppCatagoryStatistics').then(response => {
      if (response && response.data && response.data.pageInfo && response.data.pageInfo.list && response.data.pageInfo.list.length > 0) {
        let appArray = []
        for (let i = 0; i < response.data.pageInfo.list.length; i++) {
          let cataItem = {'name': response.data.pageInfo.list[i].catagoryName, 'value': response.data.pageInfo.list[i].totalCount}
          appArray.push(cataItem)
        }
        let appCatagoryData = {
          'note': vm.$i18n.messages[vm.$i18n.locale].m.appStatistics,
          'name': vm.$i18n.messages[vm.$i18n.locale].m.appName,
          'data': appArray
        }
        vm.additionalOptions.echarts_appAccessStatic = appCatagoryData
      } else {
        let appCatagoryData0 = {}
        vm.additionalOptions.echarts_appAccessStatic = appCatagoryData0
      }
    }, response => {
      console.log('error')
      let appCatagoryData0 = {}
      vm.additionalOptions.echarts_appAccessStatic = appCatagoryData0
    })

    // 用户实时日志
    vm.getUserBehavorLogRequest()
    vm.getSystemMonitorLogRequest()

    // 教师行为分析
    var resourceReq = {
      'type': '2'
    }
    this.$axios.post(configUtil.getApiPath() + 'queryByRecordtype', resourceReq).then(response => {
      let data = response.data
      if (data) {
        var result = {}
        result.note = '教师行为分析'
        var ceterArray = []
        var inClass = []
        var afterClass = []
        if (data.pageInfo.list) {
          let lists = data.pageInfo.list
          let inInside = 0
          let afterInside = 0
          let inIndex = 0
          let afterIndex = 0
          for (let i = 0; i < lists.length; i++) {
            let recordtype = lists[i].recordtype
            let behavorname = lists[i].behavorname
            let usecount = lists[i].usecount
            if (recordtype === '2') {
              inInside += usecount
              let injson = {}
              injson.value = usecount
              injson.name = behavorname
              inClass[inIndex] = injson
              inIndex = inIndex + 1
            }
            if (recordtype === '3') {
              afterInside += usecount
              let afterjson = {}
              afterjson.value = usecount
              afterjson.name = behavorname
              afterClass[afterIndex] = afterjson
              afterIndex = afterIndex + 1
            }
          }
          if (inInside > 0 || afterInside > 0) {
            let inJson = {}
            inJson.value = inInside
            inJson.name = '课中'
            ceterArray[0] = inJson
            let afterJson = {}
            afterJson.value = afterInside
            afterJson.name = '课后'
            ceterArray[1] = afterJson
          }
        }
        result.dataInside = ceterArray
        result.dataInClass = inClass
        result.dataOutClass = afterClass
        this.additionalOptions.echarts_teacherBehaviorAnalysis = result
      }
    }, response => {
      console.log('error')
    })

    // 学生行为分析
    var studentReq = {
      'type': '3'
    }
    this.$axios.post(configUtil.getApiPath() + 'queryByRecordtype', studentReq).then(response => {
      let data = response.data
      if (data) {
        var result = {}
        result.note = '学生行为分析'
        var ceterArray = []
        var beforeClass = []
        var inClass = []
        var afterClass = []
        if (data.pageInfo.list) {
          let lists = data.pageInfo.list
          let beforeInside = 0
          let inInside = 0
          let afterInside = 0
          let beforeIndex = 0
          let inIndex = 0
          let afterIndex = 0
          for (let i = 0; i < lists.length; i++) {
            let recordtype = lists[i].recordtype
            let behavorname = lists[i].behavorname
            let usecount = lists[i].usecount
            if (recordtype === '1') {
              beforeInside += usecount
              let before = {}
              before.value = usecount
              before.name = behavorname
              beforeClass[beforeIndex] = before
              beforeIndex = beforeIndex + 1
            }
            if (recordtype === '2') {
              inInside += usecount
              let injson = {}
              injson.value = usecount
              injson.name = behavorname
              inClass[inIndex] = injson
              inIndex = inIndex + 1
            }
            if (recordtype === '3') {
              afterInside += usecount
              let afterjson = {}
              afterjson.value = usecount
              afterjson.name = behavorname
              afterClass[afterIndex] = afterjson
              afterIndex = afterIndex + 1
            }
          }
          if (beforeInside > 0 || inInside > 0 || afterInside > 0) {
            let beforeJson = {}
            beforeJson.value = beforeInside
            beforeJson.name = '课前'
            ceterArray[0] = beforeJson
            let inJson = {}
            inJson.value = inInside
            inJson.name = '课中'
            ceterArray[1] = inJson
            let afterJson = {}
            afterJson.value = afterInside
            afterJson.name = '课后'
            ceterArray[2] = afterJson
          }
        }
        result.dataInside = ceterArray
        result.dataInClass = inClass
        result.dataBeforeClass = beforeClass
        result.dataOutClass = afterClass
        console.log(result)
        this.additionalOptions.echarts_studentBehaviorAnalysis = result
      }
    }, response => {
      console.log('error')
    })
    // echarts_visitsNumber 访问次数
    // echarts_monthUserActivity 月用户活跃
    let visitReq = {'type': '1'}
    this.$axios.post(configUtil.getApiPath() + 'visit/getVisitThrend', visitReq).then(response => {
      if (response && response.data.pageInfo.list && response.data.pageInfo.list.length > 0) {
        vm.activeUserTotal = response.data.pageInfo.list[0].monthUserActiveCount
        let xAxisDataArray = []
        let seriesDataArray = []
        let activeUserArray = []
        let staDayStr = ''
        let pvTotalCount = 0
        for (let i = 0; i < response.data.pageInfo.list.length; i++) {
          staDayStr = response.data.pageInfo.list[i].staDateStr
          if (staDayStr.length > 6) {
            staDayStr = staDayStr.substr(5)
          }
          xAxisDataArray.push(staDayStr)
          seriesDataArray.push(response.data.pageInfo.list[i].userVisitCount)
          activeUserArray.push(response.data.pageInfo.list[i].userActiveCount)

          pvTotalCount += response.data.pageInfo.list[i].userVisitCount
        }
        vm.totalVisitPVCount = pvTotalCount
        let visitData = {
          'note': vm.$i18n.messages[vm.$i18n.locale].m.activeUser,
          'xAxisData': xAxisDataArray,
          'seriesName': vm.$i18n.messages[vm.$i18n.locale].m.activeLevel,
          'seriesData': seriesDataArray
        }
        vm.additionalOptions.echarts_visitsNumber = visitData

        let activeUserData = {
          'note': vm.$i18n.messages[vm.$i18n.locale].m.activeUser,
          'xAxisData': xAxisDataArray,
          'seriesName': vm.$i18n.messages[vm.$i18n.locale].m.activeLevel,
          'seriesData': activeUserArray
        }
        vm.additionalOptions.echarts_monthUserActivity = activeUserData
      } else {
        vm.additionalOptions.echarts_monthUserActivity = {}
        vm.additionalOptions.echarts_visitsNumber = {}
      }
    }, response => {
      vm.additionalOptions.echarts_monthUserActivity = {}
      vm.additionalOptions.echarts_visitsNumber = {}
      console.log('getVisitStatistics error')
    })
  },
  mounted () {
    // 绑定echarts的resize方法
    window.onresize = () => {
      this.handleMapSize()
      this.$refs['echarts_newRegisterUsers'].resizeChart()
      this.$refs['echarts_appAccessStatic'].resizeChart()
      this.$refs['echarts_teacherBehaviorAnalysis'].resizeChart()
      this.$refs['echarts_studentBehaviorAnalysis'].resizeChart()
      this.$refs['echarts_monthUserActivity'].resizeChart()
      this.$refs['echarts_schoolNumber'].resizeChart()
      this.$refs['echarts_visitsNumber'].resizeChart()
    }
  },
  destroyed () {
    clearInterval(this.userBehavorLogIntervalId)
    clearInterval(this.monitorLogIntervalId)
  },
  data: function () {
    return {
      'userBehavorLogIntervalId': 0,
      'monitorLogIntervalId': 0,
      'userTotalCount': 0,
      'schoolTotalCount': 0,
      'totalVisitPVCount': 0,
      'activeUserTotal': 0,
      'teacherCount': 0,
      'studentCount': 0,
      'parentCount': 0,
      'otherCount': 0,
      additionalOptions: {
        echarts_productionMap: {},
        echarts_newRegisterUsers: {},
        echarts_educationBasicSituation: {},
        echarts_appAccessStatic: {},
        echarts_teacherBehaviorAnalysis: {},
        echarts_studentBehaviorAnalysis: {},
        echarts_monthUserActivity: {},
        echarts_visitsNumber: {}
      },
      tableData: {
        thead: [
          {
            value: this.$i18n.messages[this.$i18n.locale].m.appName,
            width: '40%'
          },
          {
            value: this.$i18n.messages[this.$i18n.locale].m.userName,
            width: '15%'
          },
          {
            value: this.$i18n.messages[this.$i18n.locale].m.manual,
            width: '45%'
          }],
        tbody: []
      },
      tableData1: {
        thead: [
          {
            value: this.$i18n.messages[this.$i18n.locale].m.logTime,
            width: '30%'
          },
          {
            value: this.$i18n.messages[this.$i18n.locale].m.logInfo,
            width: '40%'
          },
          {
            value: this.$i18n.messages[this.$i18n.locale].m.logFromApp,
            width: '30%'
          }],
        tbody: []
      },
      // 用户统计分析tab
      userTab: [
        {
          id: 'tab-second',
          name: 'userTab',
          value: this.$i18n.messages[this.$i18n.locale].m.activeUserCount
        }, {
          id: 'tab-third',
          name: 'userTab',
          value: this.$i18n.messages[this.$i18n.locale].m.schoolNum
        }, {
          id: 'tab-fourth',
          name: 'userTab',
          value: this.$i18n.messages[this.$i18n.locale].m.visitNum
        }],
      userTabActive: 'tab-second',
      // 行为分析tab
      teacherTab: [{
        id: 'tab-first',
        name: 'teacherTab',
        value: this.$i18n.messages[this.$i18n.locale].m.teacherBehavor
      }, {
        id: 'tab-second',
        name: 'teacherTab',
        value: this.$i18n.messages[this.$i18n.locale].m.studentBehavor
      }],
      teacherTabActive: 'tab-first',
      userHeaders: [
        {
          name: this.$i18n.messages[this.$i18n.locale].m.teacher,
          className: 'teacher',
          url: 'teacher-header',
          value: '0'
        }, {
          name: this.$i18n.messages[this.$i18n.locale].m.student,
          className: 'student',
          url: 'student-header',
          value: '0'
        }, {
          name: this.$i18n.messages[this.$i18n.locale].m.parent,
          className: 'parent',
          url: 'parent-header',
          value: '0'
        }, {
          name: this.$i18n.messages[this.$i18n.locale].m.other,
          className: 'other',
          url: 'other-header',
          value: '0'
        }
      ],
      totalSchool: 0
    }
  },
  components: {
    TwCard,
    TwEcharts,
    TwBubble,
    TwTable,
    TwItemInfo
  },
  methods: {
    handleMapSize: function () {
      // 专门针对地图的调整
      let domContainer = document.getElementById('echarts_productionMap')
      let chart = echarts.init(domContainer)
      let chartOption = chart.getOption()
      chartOption.graphic[0].elements[0].style.height = parseInt(domContainer.clientHeight * 0.9)
      chartOption.graphic[0].elements[0].style.width = parseInt(domContainer.clientWidth * 0.8)
      chartOption.graphic[0].elements[0].style.x = parseInt(domContainer.clientWidth * 0.1)
      chartOption.graphic[0].elements[0].style.y = parseInt(domContainer.clientHeight * 0.05)
      chart.setOption(chartOption)
    },
    handleJumperClick: function () {
      this.$router.push('/usernumber')
    },
    simulationVisit: function () {
      // 模拟本月访问次数
      let tempChart = echarts.init(document.getElementById('echarts_visitsNumber'))
      let flag = tempChart.getOption().xAxis[0].data.length
      let index = 0
      setInterval(() => {
        if (index + 17 > flag) {
          index = 0
        }
        tempChart.dispatchAction({
          type: 'dataZoom',
          // 开始位置的数值
          startValue: index,
          // 结束位置的数值
          endValue: index + 16
        })
        index += 1
      }, 1000)
    },
    simulationTime: function () {
      // 模拟本月活跃用户数滚动
      let tempChart = echarts.init(document.getElementById('echarts_monthUserActivity'))
      let flag = tempChart.getOption().xAxis[0].data.length
      let index = 0
      setInterval(() => {
        if (index + 17 > flag) {
          index = 0
        }
        tempChart.dispatchAction({
          type: 'dataZoom',
          // 开始位置的数值
          startValue: index,
          // 结束位置的数值
          endValue: index + 16
        })
        index += 1
      }, 1000)
    },
    simulation: function () {
      let tempChart = echarts.init(document.getElementById('echarts_appAccessStatic'))
      let dataLength = tempChart.getOption().series[0].data.length
      let flag = 0
      setInterval(function () {
        tempChart.dispatchAction({
          type: 'pieSelect',
          // 可选，系列 index，可以是一个数组指定多个系列
          seriesIndex: 0,
          dataIndex: flag
        })
        if (flag > 0) {
          tempChart.dispatchAction({
            type: 'pieUnSelect',
            // 可选，系列 index，可以是一个数组指定多个系列
            seriesIndex: 0,
            dataIndex: flag - 1
          })
        }
        flag += 1
        if (flag === dataLength) {
          tempChart.dispatchAction({
            type: 'pieUnSelect',
            // 可选，系列 index，可以是一个数组指定多个系列
            seriesIndex: 0,
            dataIndex: flag - 1
          })
          flag = 0
        }
      }, 2000)
    },
    handleChangeCardTab: function (id, name) {
      if (name === 'teacherTab') {
        this.teacherTabActive = id
        if (id === 'tab-second') {
          this.$refs['echarts_studentBehaviorAnalysis'].resizeChart()
        }
      }
      if (name === 'userTab') {
        this.userTabActive = id
        if (id === 'tab-second') {
          this.$refs['echarts_monthUserActivity'].resizeChart()
        }
        if (id === 'tab-third') {
          this.$refs['echarts_schoolNumber'].resizeChart()
        }
        if (id === 'tab-fourth') {
          this.$refs['echarts_visitsNumber'].resizeChart()
        }
      }
    },
    handleFinishCharts: function (payload) {
      console.log('教师行为分析完成 ')
      // 教师行为分析涉及到echarts实例事件，在此处写逻辑
      let teacherChart = echarts.init(document.getElementById('echarts_teacherBehaviorAnalysis'))
      teacherChart.on('click', (params) => {
        if (params.name === this.$i18n.messages[this.$i18n.locale].m.lessoning) {
          let temp = teacherChart.getOption()
          temp.series[1].data = temp.series[1].dataInClass
          teacherChart.setOption(temp)
        }
        if (params.name === this.$i18n.messages[this.$i18n.locale].m.lessonafter) {
          let temp = teacherChart.getOption()
          temp.series[1].data = temp.series[1].dataOutClass
          teacherChart.setOption(temp)
        }
      })
      // 学生行为分析echart实例事件
      let studentChart = echarts.init(document.getElementById('echarts_studentBehaviorAnalysis'))
      studentChart.on('click', (params) => {
        if (params.name === this.$i18n.messages[this.$i18n.locale].m.lessoning) {
          let temp = studentChart.getOption()
          temp.series[1].data = temp.series[1].dataInClass
          studentChart.setOption(temp)
        }
        if (params.name === this.$i18n.messages[this.$i18n.locale].m.lessonafter) {
          let temp = studentChart.getOption()
          temp.series[1].data = temp.series[1].dataOutClass
          studentChart.setOption(temp)
        }
        if (params.name === this.$i18n.messages[this.$i18n.locale].m.lessonbefor) {
          let temp = studentChart.getOption()
          temp.series[1].data = temp.series[1].dataBeforeClass
          studentChart.setOption(temp)
        }
      })
    },
    getOrgAreaRequest: function () {
      let vm = this
      vm.totalSchool = 0
      vm.additionalOptions.echarts_schoolNumber = {
        'xAxisData': [],
        'seriesData': []
      }
      this.$axios.post(configUtil.getApiPath() + 'user/getUserOrOrgAreaStatisticsByMonth', {'type': '1', 'preCount': 1}).then(response => {
        if (response && response.data.pageInfo.list && response.data.pageInfo.list.length > 0) {
          let nameArray = []
          let countArray = []

          for (let i = 0; i < response.data.pageInfo.list[0].areaCountList.length; i++) {
            let areaPieNameArray = []
            let countPieArray = []
            for (let i = 0; i < response.data.pageInfo.list.length; i++) {
              areaPieNameArray.push(response.data.pageInfo.list[0].areaCountList[i].areaName)
              countPieArray.push(response.data.pageInfo.list[response.data.pageInfo.list.length - 1].areaCountList[i].totalCount)
            }

            if (i === response.data.pageInfo.list.length - 1) {
              for (let j = 0; j < response.data.pageInfo.list[i].areaCountList.length; j++) {
                nameArray.push(response.data.pageInfo.list[i].areaCountList[j].areaName)
                countArray.push(response.data.pageInfo.list[i].areaCountList[j].totalCount)
                vm.totalSchool += response.data.pageInfo.list[i].areaCountList[j].totalCount
              }
            }
          }

          let schoolData = {
            'xAxisData': nameArray,
            'seriesData': countArray
          }
          vm.additionalOptions.echarts_schoolNumber = schoolData
        }
      }, response => {
        console.log('error')
      })
    },
    getUserBehavorLogRequest: function () {
      let vm = this
      this.$axios.post(configUtil.getApiPath() + 'log/getLogList', {'type': '1'}).then(response => {
        if (response && response.data.pageInfo.list && response.data.pageInfo.list.length > 0) {
          let dataArray = []
          for (let i = 0; i < response.data.pageInfo.list.length; i++) {
            let item = {'sys': response.data.pageInfo.list[i].appName, 'name': response.data.pageInfo.list[i].userName, 'action': response.data.pageInfo.list[i].loginfoMessage}
            dataArray.push(item)
          }
          vm.tableData.tbody = dataArray
          vm.startUserBehavorLogInterval()
        }
      }, response => {
        console.log('error')
      })
    },
    getSystemMonitorLogRequest: function () {
      let vm = this
      this.$axios.post(configUtil.getApiPath() + 'log/getLogList', {'type': '2'}).then(response => {
        if (response && response.data.pageInfo.list && response.data.pageInfo.list.length > 0) {
          let dataArray = []
          for (let i = 0; i < response.data.pageInfo.list.length; i++) {
            let item = {'time': new Date().toLocaleString(), 'log': response.data.pageInfo.list[i].loginfoMessage, 'sys': response.data.pageInfo.list[i].appName}
            dataArray.push(item)
          }
          vm.tableData1.tbody = dataArray
          vm.startMonitorLogInterval()
        }
      }, response => {
        console.log('error')
      })
    },
    startUserBehavorLogInterval: function () {
      // 模拟表格数据
      this.userBehavorLogIntervalId = setInterval(() => {
        if (this.tableData.tbody.length > 5) {
          let obj = this.tableData.tbody.shift()
          this.tableData.tbody.push(obj)
        }
      }, 1000)
    },
    startMonitorLogInterval: function () {
      // 模拟监控表格数据
      this.monitorLogIntervalId = setInterval(() => {
        if (this.tableData1.tbody.length > 15) {
          let obj = this.tableData1.tbody.shift()
          obj.time = new Date().toLocaleString()
          this.tableData1.tbody.push(obj)
        }
      }, 1000)
    },
    handleProductionMap: function () {
      // 为地图添加下探, 全部的都在当前页面进行，没有再触发rebuildChart方法
      let chinaMap = echarts.init(document.getElementById('echarts_productionMap'))
      let chinaMapOption = chinaMap.getOption()
      let provinces = ['台湾', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏',
        '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西',
        '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆',
        '北京', '天津', '上海', '重庆', '香港', '澳门']
      let tempScatterData = chinaMapOption.series[1].data = []
      chinaMap.on('geoselectchanged', (p) => {
        let params = {}
        params.name = p.batch[0].name
        let $vm = this
        if (provinces.find(e => e === params.name)) {
          chinaMapOption.geo[0].map = params.name
          // 市级开启标签
          chinaMapOption.geo[0].label.show = true
          // 市级时隐藏散点图
          chinaMapOption.series[1].itemStyle.opacity = 0
          chinaMap.setOption(chinaMapOption)
          console.log(chinaMapOption)
        } else {
          // 市级的下探，这是采用geo的情况
          let formatterCityName = $vm.cityNameFormat(params.name)
          let cityIndex = $vm.chinaCities.findIndex(e => {
            console.log(e.properties.name)
            return e.properties.name === formatterCityName
          })
          if (cityIndex !== -1) {
            if (!echarts.getMap(formatterCityName)) {
              let tempMap = {
                'type': 'FeatureCollection',
                'UTF8Encoding': true,
                'features': [this.chinaCities[cityIndex]]
              }
              echarts.registerMap(formatterCityName, tempMap)
            }
            chinaMapOption.geo[0].map = formatterCityName
            chinaMap.setOption(chinaMapOption)
          }
        }
      })
      chinaMap.on('restore', () => {
        // 将地图重置为china
        chinaMapOption.geo[0].map = 'china'
        chinaMapOption.geo[0].label.show = false
        chinaMapOption.series[1] = tempScatterData
        chinaMap.setOption(chinaMapOption)
      })
    },
    cityNameFormat: function (name) {
      let formatterCityName = ''
      let cityNameArr = [...name]
      if (name.indexOf('市') !== -1) {
        for (let i = 0; i < cityNameArr.length - 1; i += 1) {
          formatterCityName += cityNameArr[i]
        }
      } else if (name.indexOf('地区') !== -1) {
        for (let i = 0; i < cityNameArr.length - 2; i += 1) {
          formatterCityName += cityNameArr[i]
        }
      } else if (name.indexOf('自治州') !== -1 || name.indexOf('自治县') !== -1) {
        let counter = 0
        for (let i = 0; i < cityNameArr.length; i += 1) {
          if (cityNameArr[i].toString() === '族') {
            counter += 1
          }
        }
        if (name.indexOf('蒙古') !== -1) {
          if (name.indexOf('族') !== -1) {
            for (let i = 0; i < cityNameArr.length - 4 - (counter * 2); i += 1) {
              formatterCityName += cityNameArr[i]
            }
          } else {
            for (let i = 0; i < cityNameArr.length - 5; i += 1) {
              formatterCityName += cityNameArr[i]
            }
          }
        } else {
          for (let i = 0; i < cityNameArr.length - 3 - (counter * 2); i += 1) {
            formatterCityName += cityNameArr[i]
          }
        }
      } else {
        formatterCityName = name
      }
      return formatterCityName
    }
  }
}
</script>

<style scoped></style>
